<!DOCTYPE html>
<html>
<head>
    <title>{{ data.city }} 气象分析</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
        :root {
            --primary: #3f51b5;
            --secondary: #2196f3;
        }

        body {
            font-family: 'Segoe UI', sans-serif;
            margin: 0;
            padding: 2rem;
            background: #f5f7fa;
        }

        .header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .chart-card {
            background: white;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }

        .chart-card:hover {
            transform: translateY(-5px);
        }

        .chart-title {
            color: var(--primary);
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }

        .info-panel {
            background: white;
            padding: 2rem;
            border-radius: 1rem;
            margin: 2rem auto;
            max-width: 800px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>{{ data.city }} 气象数据分析</h1>
        <p>地理坐标：{{ data.coordinates }}</p>
    </div>

    <div class="info-panel">
        <h3>实时状态</h3>
        <p>天气：{{ data.status.weather }}</p>
        <p>空气质量：{{ data.status.airQuality }}</p>
        <p>首要污染物：{{ data.status.primaryPollutant }}</p>
    </div>

    <div class="dashboard">
        <!-- 温度对比图 -->
        <div class="chart-card">
            <div class="chart-title">温度对比（℃）</div>
            <div id="tempChart" style="height:300px"></div>
        </div>

        <!-- 空气质量仪表盘 -->
        <div class="chart-card">
            <div class="chart-title">空气质量指数</div>
            <div id="aqiChart" style="height:300px"></div>
        </div>

        <!-- 气象雷达图 -->
        <div class="chart-card">
            <div class="chart-title">气象指标雷达图</div>
            <div id="radarChart" style="height:300px"></div>
        </div>

        <!-- 湿度云量环状图 -->
        <div class="chart-card">
            <div class="chart-title">湿度与云量</div>
            <div id="humidityChart" style="height:300px"></div>
        </div>
    </div>

    <script>
        // 温度柱状图
        const tempChart = echarts.init(document.getElementById('tempChart'));
        tempChart.setOption({
            xAxis: {
                data: ['实际温度', '体感温度']
            },
            yAxis: {},
            series: [{
                type: 'bar',
                data: [{{ data.indicators.temp }}, {{ data.indicators.feelsLike }}],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#3f51b5' },
                        { offset: 1, color: '#2196f3' }
                    ])
                }
            }]
        });

        // 空气质量仪表盘
        const aqiChart = echarts.init(document.getElementById('aqiChart'));
        aqiChart.setOption({
            series: [{
                type: 'gauge',
                detail: { formatter: '{value} AQI' },
                data: [{ value: {{ data.indicators.aqi }} }],
                axisLine: {
                    lineStyle: {
                        color: [
                            [0.2, '#4CAF50'],
                            [0.4, '#FFEB3B'],
                            [0.6, '#FF9800'],
                            [0.8, '#F44336'],
                            [1, '#9C27B0']
                        ]
                    }
                }
            }]
        });

        // 气象雷达图
        const radarChart = echarts.init(document.getElementById('radarChart'));
        radarChart.setOption({
            radar: {
                indicator: [
                    { name: '风速 (km/h)', max: 50 },
                    { name: '气压 (hPa)', max: 1100 },
                    { name: '降水量 (mm)', max: 50 },
                    { name: '云量 (%)', max: 100 }
                ]
            },
            series: [{
                type: 'radar',
                data: [{
                    value: [
                        {{ data.indicators.windSpeed }},
                        {{ data.indicators.pressure }},
                        {{ data.indicators.precip }},
                        {{ data.indicators.cloud }}
                    ]
                }]
            }]
        });

        // 湿度环状图
        const humidityChart = echarts.init(document.getElementById('humidityChart'));
        humidityChart.setOption({
            series: [{
                type: 'pie',
                radius: ['50%', '70%'],
                data: [
                    { value: {{ data.indicators.humidity }}, name: '湿度' },
                    { value: {{ data.indicators.cloud }}, name: '云量' }
                ],
                label: { show: false }
            }]
        });
    </script>
</body>
</html>